<template>
  <el-container>
    <Header></Header>
    <el-main>
      <el-card class="box-card">
        <el-row>
          <el-col :span="24"
            ><div class="grid-content">请核对停车信息</div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="24"
            ><div class="grid-content">
              {{ oiNO }}
            </div></el-col
          >
        </el-row>
        <el-divider></el-divider>
        <el-row>
          <el-col :span="12"><div class="info">停车路段：</div></el-col>
          <el-col :span="12"
            ><div class="info">{{ section }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"><div class="info">驶入时间：</div></el-col>
          <el-col :span="12"
            ><div class="info">{{ stratTime }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="12"><div class="info">停车费用：</div></el-col>
          <el-col :span="12"
            ><div class="info">{{ amount }}</div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="ensureBtn">
              <el-button type="primary" round @click="dialogVisible = true"
                >确认停车</el-button
              >
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="ensurePark">确认后您将支付本次停车费用</div></el-col
          >
        </el-row>

        <!--------------------------------使用说明------------------------->
        <el-divider></el-divider>
        <el-row>
          <el-col :span="6"><div class="instructions">使用说明</div></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-light"></div
          ></el-col>
          <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-light"></div
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="instructions-con">
              1、车辆驶入泊位后系统开始计时，车辆停好后请您扫码泊位二维码，按照提示确认停车。
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="instructions-con">
              2、超过5分钟未确认停车，监管人员将对车辆拍照并上报，必要时将锁车处理；
            </div></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="24"
            ><div class="instructions-con">
              3、车辆驶离泊位系统将自动停止计费，并将账单
              发送到您手机上，收到账单后请及时缴费。
            </div></el-col
          >
        </el-row>
      </el-card>
      <!--确认停车dialog-->
      <el-dialog
        title="确认提示"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose"
      >
        <span>确认停车后，本次停车费用将由您支付！ 请仔细核对</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ensureParkBtn"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-main>
    <el-footer>
      <Footer v-if="false"></Footer>
    </el-footer>
  </el-container>
</template>

<script>
import Footer from "@/components/Footer";
import Header from "@/components/Header";
export default {
  name: "Parking",
  components: { Header, Footer },
  data() {
    return {
      oiNO: "12312312",
      amount: "100",
      stratTime: "2022/9/12 12:09:23",
      section: "公园南路",
      dialogVisible: false,
    };
  },
  methods: {
    delParkNo() {
      this.inputParkNo = "";
    },
    //确认停车按钮
    ensureParkBtn(){
        this.$router.push('/orderinfo');
    }
  },
};
</script>

<style scoped>
.el-container {
  width: 400px;
  height: 600px;
  border: 1px solid black;
  margin: auto;
  background-color: #ffffff;
}
.el-card {
  border-radius: 20px;
}
.grid-content {
  font-size: 17px;
  text-align: center;
}
.instructions {
  font-size: 16px;
}
.instructions-con {
  font-size: 12px;
}
.info {
  font-size: 14px;
}
.ensureBtn {
  text-align: center;
  margin-top: 5px;
}
.ensurePark {
  color: red;
  font-size: 14px;
  text-align: center;
  margin-top: 5px;
}
</style>